<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center" >购物街</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']"
                 @tabClick="tabClick"
                 ref="tabControl1"
                 class="tab-control"
                 v-show="isTabShow"></tab-control>
    <scroll class="wrapper" ref="scroll"
            :probe-type="3" @scroll="contentScroll"
            :pull-up-load="true" @pullingUp="loadMore">
<!--            :pull-up-load="true" @pullingUp="loadMore">-->
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <feature-view></feature-view>
      <tab-control :titles="['流行','新款','精选']"
                   @tabClick="tabClick"
                   ref="tabControl"></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop" class="backTop"/>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import HomeSwiper from "@/views/home/childComps/HomeSwiper";
import RecommendView from "@/views/home/childComps/RecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";
import GoodsList from "@/components/content/goods/GoodsList";
import Scroll from "@/components/common/scroll/Scroll";
import TabControl from "@/components/content/tabControl/TabControl";
import backTop from "@/components/content/backTop/backTop";

import {getHomeMultidata,getHomeGoods} from "@/network/home";
import {debounce} from "@/common/utils";
export default {
  name: "Home",
  components:{
    backTop,
    Scroll,
    GoodsList,
    TabControl,
    RecommendView,
    HomeSwiper,
    NavBar,
    FeatureView
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list;

    }
  },
  data(){
    return{
      banners:[] ,
      recommend:[],
      goods:{
        'pop':{page:0, list:[]},
        'new':{page:0, list:[]},
        'sell':{page:0, list:[]}
      },
      currentType:'pop',
      isShowBackTop:false,
      tabOffsetTop:0,
      isTabShow:false,
      saveY:0
    }
  },
  created() {
  //  1.请求多个数据
    this.getHomeMultidata()

    //2.请求流行，新款，精选的数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')

  },
  mounted() {
    //防抖动
    const refresh=debounce(this.$refs.scroll.refresh,200)
    //为了首页正常上下滚动，在GoodListItem中发出事件
    this.$bus.$on('homeItemImageLoad',()=>{
      refresh()
    })
  },
  activated() {
    this.$refs.scroll.refresh()
    this.$refs.scroll.bScrollTO(0,this.saveY,0)
  },
  deactivated() {
    this.saveY=this.$refs.scroll.getY()
  },
  methods:{
    //事件监听相关方法
    tabClick(index){
      switch (index){
        case 0:
          this.currentType='pop'
          break
        case 1:
          this.currentType='new'
          break
        case 2:
          this.currentType='sell'
          break
      }
      this.$refs.tabControl1.currentIndex=index
      this.$refs.tabControl.currentIndex=index
    },
    backClick(){
      this.$refs.scroll.bScrollTO(0,0)
    },
    //网络请求相关方法
    getHomeMultidata(){
      getHomeMultidata().then(res=>{
        this.banners=res.data.banner.list;
        this.recommend=res.data.recommend.list;
      })
    },
    getHomeGoods(type){
      const page=this.goods[type].page+1
      getHomeGoods(type,page).then(res=>{
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page+=1
        this.$refs.scroll.finishedPullingUp();
      })
    },
    contentScroll(position){
      //判断BackTop是否显示
      this.isShowBackTop=-(position.y)>1000

    //决定tabControl是否显示
      this.isTabShow=-(position.y)>this.tabOffsetTop
    }
    ,
    loadMore(){
      this.getHomeGoods(this.currentType)
    },
    //获取tabControl的offsetTop
    swiperImageLoad(){
      this.tabOffsetTop=this.$refs.tabControl.$el.offsetTop;
    }
  }
}
</script>

<style scoped>
  #home{
    height: 100vh;
    /*padding-top: 44px;*/
    position: relative;
  }
  .home-nav{
    background-color: var(--color-tint);
    color: white;

  }

  .wrapper{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
  }
  .tab-control{
    position: relative;
    z-index: 9;
    background-color: white;
  }

</style>
